import { useTableScroll } from '@/hooks/useTableScroll';
import { getChangeStatistic } from '@/services/production-center';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { useRef, useState } from 'react';

const ACSStatistic = () => {
  const [count, setCount] = useState(0);
  const tableScrollHeight = useTableScroll({}, count);
  const actionRef = useRef<ActionType>();
  const [mainTableParams, setMainTableParams] = useState({});
  const columns: ProColumns<any>[] = [
    {
      title: '统计日期',
      valueType: 'dateRange',
      dataIndex: 'createTime',
      width: 180,
      order: 1,
      search: {
        transform: (value: any) => {
          if (!value) return null;
          return {
            minDay: value[0],
            maxDay: value[1],
          };
        },
      },
      hideInTable: true,
    },
    {
      title: '日期',
      dataIndex: 'day',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '入款金额',
      dataIndex: 'bookAccountChargeAmount',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '下发成功金额',
      dataIndex: 'successAmount',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '下发成功笔数',
      dataIndex: 'successCount',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '下发失败金额',
      dataIndex: 'failedAmount',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '下发失败笔数',
      dataIndex: 'failCount',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '下发总金额',
      dataIndex: 'totalTransAmount',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '下发总笔数',
      dataIndex: 'totalCount',
      width: 160,
      hideInSearch: true,
    },
  ];

  return (
    <div>
      <ProTable
        scroll={{ y: tableScrollHeight, x: 200 }}
        rowKey={(record) => {
          return `${record.day}${Math.random()}`;
        }}
        search={{
          labelWidth: 'auto',
          submitterColSpanProps: {
            offset: 0,
            span: 2,
          },
          optionRender(searchConfig, props, dom) {
            return dom.reverse();
          },
        }}
        request={async (params: any) => {
          console.log(params);
          const data = {
            pageNo: params.current - 1,
            pageSize: params.pageSize,
            minDay: params.minDay,
            maxDay: params.maxDay,
          };
          try {
            const res = (await getChangeStatistic(data)) as any;
            setMainTableParams(data);
            setCount(count + 1);
            if (res.success) {
              return {
                data: res.data,
                success: true,
                total: res.count,
              };
            } else {
              message.error(res.resultMessage);
            }
            return {
              data: [],
              success: false,
            };
          } catch (error) {
            return {
              data: [],
              success: false,
            };
          }
        }}
        dateFormatter="YYYY-MM-DD"
        columns={columns}
        pagination={{
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        actionRef={actionRef}
        cardBordered
        columnsState={{
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
        }}
        toolBarRender={() => [
          <Button
            key="button"
            type="primary"
            onClick={() => {
              const formDom = document.createElement('form');
              formDom.setAttribute('type', 'hidden');
              formDom.setAttribute('target', '_black');
              formDom.setAttribute('method', 'get');
              formDom.setAttribute(
                'action',
                '/api/merchant/user-safe-pay-trans-stat/export',
              );
              const inputDom = document.createElement('input');
              inputDom.setAttribute('type', 'hidden');
              inputDom.setAttribute('name', 'searchModelJson');

              inputDom.setAttribute('value', JSON.stringify(mainTableParams));

              formDom.append(inputDom);
              document.body.append(formDom);
              formDom.submit();
            }}
          >
            导出
          </Button>,
        ]}
      />
    </div>
  );
};

export default ACSStatistic;
